<template>
  <div style="background-color: #ebeef3" v-for="ele in Details" :key="ele.doctor_id">
    <div>
      <van-nav-bar style="background-color: #2894ff">
        <template #left>
          <div @click="onClickLeft" style="color: white">
            <van-icon name="arrow-left" size="18" color="#fff"></van-icon>
            <span style="font-size: 18px; line-height: 20px">{{ ele.doctor_name }}医生</span>
          </div>
        </template>
      </van-nav-bar>
    </div>
    <div style="color: gainsboro;">
      <van-divider>以下为医助接待</van-divider>
      <div>
        <div style="display: flex">
          <div style="padding: 8px 13px">
            <div style="
                  border-radius: 12px;
                  display: flex;
                  background-image: linear-gradient(
                    to bottom right,
                    #dff1ff,
                    #ffffff
                  );
                  padding: 10px 5px;
                ">
              <img :src="ele.doctor_avatar" style="border-radius: 50%; margin-top: 20px;height: 50px;margin-top: 0px;" />
              <div style="color: black">
                <span style="font-weight: bolder; font-size: 20px">{{ ele.doctor_name }}</span>
                <span style="margin-left: 10px;">{{ ele.doctor_titles }}&nbsp;|&nbsp;</span>
                <span>{{ ele.department_name }}</span>
                <div style="display: flex">
                  <span style="font-size: 15px;">{{ ele.hospital_name }}</span>
                  <div style="background-color: #c8761c; color: #f0dec6">
                    <i class="iconfont icon-yiyuan"></i>
                    <span style="
                          display: inline-block;
                          padding: 1px 3px;
                          font-weight: bolder;
                        ">三甲</span>
                  </div>
                  <span style="
                        color: #f0dec6;
                        font-weight: bolder;
                        padding: 1px 3px;
                        display: inline-block;
                        margin-left: 5px;
                        background-color: #02cb68;
                      ">徽医</span>
                </div>
                <p style="font-size: 13px; line-height: 1.5">
                  擅长:{{ ele.doctor_great }}。
                </p>
                <p style="font-size: 13px">
                  患者评分<span style="color: #fd9721"><van-icon name="star" />4.8</span>&nbsp;&nbsp;质询量<span
                    style="color: #1178ca">1046</span>&nbsp;&nbsp;响应时间
                  <span style="color: #1178ca">38分钟</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="height: 40vh;overflow: scroll;">

        <div style="display: flex; padding: 8px 13px">
          <div>
            <img src="../../assets/mypic/AI.png" style="border-radius: 50%;width: 35px;" />
          </div>
          <div style="color: black">
            <span style="line-height: 31px">医生助手</span>
            <div style="
                  background-color: #ffffff;
                  padding: 10px;
                  font-size: 14px;
                  width: 290px;
                  border-radius: 0 8px 8px;
                  line-height: 2;
                ">
              <span>您好:请用<span style="font-weight: bolder">(5-200字)</span>详细描述你的症状,以便医生为您提供更精准的诊疗意见。</span>
            </div>
          </div>
        </div>
        <div v-for="item in conments">
          <div :style="kw ? 'display:flex' : 'display:none'"  v-if="item.user!=1" item>
            <div>
              <img :src="ele.doctor_avatar" style="border-radius: 50%;width: 35px;"  />
            </div>
            <div style="color: black">
              <span style="line-height: 31px">{{ele.doctor_name}}医生</span>
              <div style="
                    background-color: #ffffff;
                    padding: 10px;
                    font-size: 14px;
                    width: 290px;
                    border-radius: 0 8px 8px;
                    line-height: 2;
                  ">
                <span>{{item.info1}}</span>
              </div>
            </div>
          </div>
          <div style="display: flex; padding: 8px 13px;justify-content: space-between;" v-else>
            <div style="color: black;">
              <span style="line-height: 31px;display: inline-block;width: 100%;margin-left: 274px;">用户</span>
              <div style="
                    background-color: #ffffff;
                    padding: 10px;
                    width: 290px;
                    font-size: 14px;
                    border-radius: 8px 0px 8px 8px;
                    line-height: 2;
                  ">
                <span>{{ item.info }}</span>
              </div>
            </div>
            <div>
              <img src="../../assets/mypic/user.webp" style="border-radius: 50%;width: 35px;" />
            </div>
          </div>
        </div>
      </div>
      <div style="margin-top: 10px">
        <div style="color: black; background-color: #f9f9f9">
          <span style="
                display: inline-block;
                transform: scale(0.9);
                flex-wrap: nowrap;
              "><van-icon name="info-o" /><span>您可以与医生沟通10次,以下内容将作为第1次提问</span></span>
        </div>
        <div style="
              display: flex;
              justify-content: space-between;
              padding: 20px;
              position: relative;
            ">
          <textarea v-model="content" style="border-radius: 8px; color: black;resize: none;" cols="35" rows="7" placeholder="医生您好,我的情况如下:
  [症状+多久了]:">
</textarea>
          <div style="
                color: gray;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                font-weight: bolder;
              ">
            <div>
              <van-icon size="30px" color="gray" name="add-o" />
              <p>照片</p>
            </div>
            <div @click="gggg">
              <van-icon color="#0594fd" size="30px" name="upgrade" />
              <p style="color: #0594fd">发送</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router';
import httpApi from '@/http';
import useWebSocket  from '@/hook/websocket.js';
import { ref, onMounted, reactive } from 'vue';
const kw = ref(false)
const route = useRoute()
let content = reactive<any>("")
const doctor_id = route.params.doctor_id
console.log(doctor_id);
const onClickLeft = () => history.back();
const active = ref(0);
const Details = reactive<any[]>([])
const value = ref(0);
const info1 = reactive<any>('')
let conments = reactive<any[]>([{
  user:2,
  info:info1
}
])
const a={
  user:1,
  info:content
}
const gggg = function(){
  if(content==''){return}
  conments.push({user:1,info:content})
  console.log('2552',a.info);
  // content：发送的消息
  console.log(1111,content);
  ws.send(content.toString())
  content =''
}

const handleMessage = function(e:any){
  console.log('服务器端消息',e.data);
  let info1 = e.data
  if(info1!=''){kw.value=true}
  conments.push({user:2,info1})
  console.log(info1,'1111111111111111111');
  console.log(conments,11111);
  conments.splice(0,1)
}
const ws = useWebSocket(handleMessage)
onMounted(() => {
  httpApi.DoctorApi.selectById({ doctor_id }).then(res => {
    console.log('加载的内容', res);
    Details.push(...res.data.data)
    console.log(Details);
  })
})
</script>

<style scoped lang="scss">
@import url("//at.alicdn.com/t/c/font_3903304_e3wrhqcw3ce.css");

p {
  margin: 0px;
}

i {
  &:before {
    font-size: 16px;
  }
}

.van-icon-add-o:before {
  content: "\e662";
  font-size: 30px;
}

.van-icon-upgrade:before {
  content: "\e732";
  font-size: 30px;
}
</style>
